<template>
    <div>
        <!-- 查询条件 -->
        <el-card>
            <el-form :model="condition" label-width="100px" :inline="true" size="normal">
                <el-form-item>

                    <el-date-picker v-model="condition.dateRange" type="datetimerange" range-separator="-"
                        start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
                </el-form-item>
                <el-form-item style="float:right">
                    <el-row :gutter="20">
                        <el-col :span="12" :offset="0"><el-select v-model="condition.module" clearable
                                placeholder="全部模块">
                                <el-option v-for="item in moduleList" :key="item.Id" :label="item.Sign"
                                    :value="item.Sign">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="12" :offset="0"><el-input v-model="condition.operationName"
                                placeholder="请输入操作账号">
                                <el-icon style="vertical-align: middle">
                                    <Search />
                                </el-icon>
                                <span style="vertical-align: middle"></span>
                            </el-input>

                        </el-col>
                    </el-row>
                    <el-button type="primary" size="default" @click="handleCurrentChange(1)">查询</el-button>
                </el-form-item>


            </el-form>

        </el-card>
        <!-- 表格 -->
        <el-card>
            <el-table :data="logList" border stripe>

                <el-table-column prop="OperationName" label="操作账号" align="center">
                </el-table-column>
                <el-table-column prop="OperationModule" label="操作模块" align="center">

                </el-table-column>
                <el-table-column prop="OperationTime" label="操作时间" align="center">
                </el-table-column>
                <el-table-column prop="OperationContent" label="操作内容" align="center">
                </el-table-column>


            </el-table>

        </el-card>
        <!-- 分页 -->
        <el-card>
            <table style="margin: 5px auto;">
                <tbody>
                    <tr>
                        <td><el-pagination v-model:current-page="pager.pageIndex" v-model:page-size="pager.pageSize"
                                :page-sizes="[1, 2, 3, 10]" layout="total, slot,sizes" :total="pager.totalCount"
                                @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                                next-text="下一页">
                                <span class="el-pagination__total is-first">&nbsp;共计{{ pager.pageCount }}页,当前{{
                pager.pageIndex
            }}/{{ pager.pageCount }}页</span>
                            </el-pagination>
                        </td>
                        <td><el-pagination v-model:current-page="pager.pageIndex" v-model:page-size="pager.pageSize"
                                :page-sizes="[1, 2, 3, 10]" layout="slot, prev, pager" :total="pager.totalCount"
                                @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                                next-text="下一页">
                                <button @click="handleCurrentChange(1)" :disabled="pager.pageIndex == 1"
                                    class="btn-prev">首页</button>
                            </el-pagination></td>
                        <td><el-pagination v-model:current-page="pager.pageIndex" v-model:page-size="pager.pageSize"
                                :page-sizes="[1, 2, 3, 10]" layout="slot, next, jumper" :total="pager.totalCount"
                                @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                                next-text="下一页">
                                <button @click="handleCurrentChange(pager.pageCount)"
                                    :disabled="pager.pageIndex == pager.pageCount" class="next-prev">尾页</button>
                            </el-pagination></td>
                    </tr>
                </tbody>
            </table>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import axios from 'axios';
import { ref, reactive } from 'vue'
import { onMounted } from 'vue';
import { computed } from 'vue';
import { baseURL_dev } from '@/config/baseURL'

const baseURL = baseURL_dev
axios.defaults.baseURL = baseURL;

const condition = reactive({
    dateRange: [],
    module: "",
    operationName: "",
})
const moduleList = ref([])
//获取模块列表
function getModuleList() {
    axios.get("OperationLog/GetOperationModules").then(res => {
        moduleList.value = res.data.Data;
    })
}
const pager = reactive({
    pageIndex: 1,
    pageSize: 10,
    totalCount: 0,
    pageCount: 0,
})

//获取操作日志列表
const logList = ref([])
function getLogList() {
    axios.get("OperationLog/GetOperationLogs", {
        params: {
            sDate: condition.dateRange[0],
            eDate: condition.dateRange[1],
            module: condition.module,
            operationName: condition.operationName,
            pageIndex: pager.pageIndex,
            pageSize: pager.pageSize
        }
    }).then(res => {
        logList.value = res.data.Data;
        pager.totalCount = res.data.TotalCount;
        pager.pageCount = res.data.PageCount;
    })
}
function handleSizeChange(size: number) {
    pager.pageSize = size;
    getLogList();
}
function handleCurrentChange(index: number) {
    pager.pageIndex = index;
    getLogList();
}


onMounted(() => {
    getModuleList();
    getLogList();
})
</script>
<style scoped>
.el-card {
    margin-bottom: 20px;
}
</style>